<template>
  <div>
    <!--<div>-->
    <div class="weui-search-bar" id="search_bar">
      <div class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" ref="searchInput" class="weui-search-bar__input" placeholder="请输入拍品名称/店铺/专场" autocomplete="off" v-model="keyword" @input="searchKeyword" @keyup="searchEnter($event)" @blur="searchEnter({keyCode:13})"/>
          <a href="javascript:" class="weui-icon-clear" id="search_clear" @click="clearKeyword"></a>
        </div>
      </div>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel" @click="goBack">取消</a>
    </div>

    <div class="search-show">
      <ul class="nav">
        <li :class="{active:type == v.type}" v-for="(v,k) in typeNavList" :key="k" @click="toggleType(v.type)">{{v.name}}</li>
      </ul>

      <div class="result-list" v-if="!isShowList">
        <div class="weui-cell" v-for="(v,k) in searchWordInfoList" :key="k" @click="clickSearchResult(v.keyword)">
          <div class="weui-cell__bd weui-cell_primary">
            <p>{{v.keyword}}</p>
            <p>约{{v.recordCount}}个结果</p>
          </div>
        </div>
      </div>

    </div>

    <!--</div>-->
    <!--<div v-if="isShowList">-->
      <!--<keep-alive>-->
        <!--<router-view v-if="$route.meta.keepAlive"></router-view>-->
      <!--</keep-alive>-->
      <!--<router-view v-if="!$route.meta.keepAlive"></router-view>-->
    <!--</div>-->

    <router-view v-if="isShowList"></router-view>

  </div>
</template>

<script>
  import {getStatusMapByKey,setlocalStore,getlocalStore,removelocalStore} from '../../assets/js/tools';
  import {getSearchWordInfo,getDynastyList} from '../../assets/js/getData';
  export default {
    name: "searchResult",
    data(){
      return {
        keyword:'',
        typeNavList:[],
        type:null,//搜索关键词类型
        searchWordInfoList:[],
        hotSearchList:[],//热门搜索
        historySearchList:[],//历史搜索列表

        isFocus:null,
        isShowList:false,
        shopList:[],

        productVal:null,
        shopVal:null,
        specialVal:null,
        dynastyVal:4
      }
    },
    created(){
      this.productVal = getStatusMapByKey('eFollowesType')['product'].val;//1
      this.shopVal = getStatusMapByKey('eFollowesType')['shop'].val;//2
      this.specialVal = getStatusMapByKey('eFollowesType')['special'].val;//3
      this.typeNavList = [
        {type:this.productVal,name:'拍品'},
        {type:this.specialVal,name:'专场'},
        {type:this.shopVal,name:'店铺'},
        {type:this.dynastyVal,name:'朝代分类'}
      ];
      // console.log(this.$route.query);
      this.keyword = this.$route.query.keyword;
      this.type = this.$route.query.type;
      if(this.$route.query.hasOwnProperty('dynastyName')){
        this.keyword = this.$route.query.dynastyName;
      }

      if(this.$route.query.hasOwnProperty('isFocus')){
        this.isFocus = this.$route.query.isFocus;
      }else {
        if(this.keyword){
          this.isShowList = true;
          this.gotoList(this.type,this.keyword);
        }
      }


    },
    mounted(){
      if(this.isFocus){
        this.$refs.searchInput.focus();
      }
    },
    methods:{
      //搜索
      searchKeyword(){
        if(this.keyword){
          this.isShowList = false;
          this.getSearchWordInfo();
        }else {
          this.$router.push({name:'search'});
        }
      },
      //手机搜索键
      searchEnter(e){
        if(e.keyCode == 13&&this.keyword){
          this.isShowList = true;
          this.$refs.searchInput.blur();
          this.gotoList(this.type,this.keyword);
        }
      },
      //点击搜索结果
      clickSearchResult(v){
        this.isShowList = true;
        this.gotoList(this.type,v);
      },
      //显示对应的列表
      gotoList(type,v){
        let history = getlocalStore('historySearch');
        let arr = [];
        if(history){
          let checkrepeat = false;
          arr = JSON.parse(history);
          arr.forEach(item => {
            if(item.keyword==v){
              checkrepeat = true;
            }
          });
          if(!checkrepeat){
            arr.unshift({keyword:v,type:type});
          }
        }else {
          arr.unshift({keyword:v,type:type});
        }
        setlocalStore('historySearch',arr);

        switch(type) {
          case this.productVal:
            this.$router.push({name:'searchResult.lots',query:{keyword:v,type:type}});
            break;
          case this.shopVal:
            this.$router.push({name:'searchResult.shop',query:{keyword:v,type:type}});
            break;
          case this.specialVal:
            this.$router.push({name:'searchResult.special',query:{keyword:v,type:type}});
            break;
          case this.dynastyVal:
            this.$router.push({name:'searchResult.lots',query:{dynastyName:v,type:type}});
            break;
        }
      },
      //切换搜索关键词类型
      toggleType(type){
        this.type = type;
        this.isShowList = false;
        this.getSearchWordInfo();
      },
      //获取搜索词联想
      async getSearchWordInfo(){
        let params = {
          keyword:this.keyword,
          type:this.type,
          pageNum:1,
          pageSize:10,
        };
        let res = await getSearchWordInfo(params);
        if(res.data.reqResult.code>0){
          this.searchWordInfoList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //清空输入框
      clearKeyword(){
        this.keyword = '';
        this.$router.replace({name:'search'});
      },
      //取消返回首页
      goBack(){
        this.$router.replace({name:'home'});
      },
    }
  }
</script>

<style scoped>
  .weui-search-bar{
    background-color: #ffffff;
    align-items: center;
    padding: 0.4rem 1rem;
  }
  .weui-search-bar__box{
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
  .weui-search-bar__cancel-btn{
    display: block;
    background-color: #ccc;
    color: #fff;
    padding: 0 0.25rem;
    border-radius: 3px;
    line-height: 1.25rem;
    height: 1.25rem;
  }
  .search-box{
    background-color: #ffffff;
    padding: 0.75rem 1rem;
  }
  .search-record{
    margin-bottom: 1.25rem;
  }
  .search-record ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    /*overflow: auto;*/
  }
  .search-record li{
    background-color: #cccccc;
    padding: 0.1rem 0.4rem;
    color: #ffffff;
    border-radius: 3px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.75rem;
  }
  .search-history ul{
    margin-top: 0.4rem;
  }
  .search-history li{
    height: 2rem;
    line-height: 2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .search-history li:after{
    content: " ";
    position: absolute;
    left: -1rem;
    bottom: 0;
    right: -1rem;
    height: 1px;
    border-top: 1px solid #F2F2F2;
    transform-origin: 0 0;
    transform: scaleY(0.5);
    z-index: 2;
  }
  .search-history li span{
    color: #656565;
    font-size: 0.7rem;
  }
  .search-history li .icon-close{
    color: #989898;
    font-size: 0.6rem;
  }
  .search-show .nav{
    display: flex;
    justify-content: space-around;
    padding: 0.25rem 0 0.5rem 0;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }
  .search-show .nav li{
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }
  .search-show .nav li.active{
    border-bottom: 2px solid #c50000;
  }
  .search-show .weui-cell_primary{
    display: flex;
    justify-content: space-between;
  }
  .result-list{
    border-bottom: 1px solid #e5e5e5;
  }
  .result-list .weui-cell{
    padding: 0.7rem 1.1rem;
  }
  .result-list .weui-cell:before{
    left: 0;
  }
  .result-list .weui-cell__bd p:first-child{
    color: #656565;
    font-size: 0.7rem;
  }
  .result-list .weui-cell__bd p:last-child{
    color: #989898;
    font-size: 0.6rem;
  }
  .history-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .history-title .icon-delete{
    font-size: 0.8rem;
  }
</style>
